<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div>
  <header>
    <h1 onclick="">header</h1>
  </header>
  <main id="app">
    <div>
      <h1 v-bind:title="msg">{{ msg }}</h1>
      <button v-on:click="reverseMsg">reverse msg</button>
      <br>
      <h1 v-if="seen">现在你看到我了</h1>
      <button v-on:click="seen = !seen">TOGGLE H1</button>
    </div>
    <ul>
      <li v-for="item in todos">
        {{ item.text }}
      </li>
    </ul>
    <div>
      <input v-model="todoText">
      <button v-on:click="addTodo">Add #{{todos.length + 1}}</button>
    </div>
    <div>
      <h2>{{ text }}</h2>
<!--      <input type="text" v-model="text">-->
      <input
        type="text"
        v-bind:value="text"
        v-on:input="handleChange"
      >
    </div>
  </main>
  <footer>
<!--    <h1>{{ msg1 }}</h1>-->
  </footer>
</div>

<!--
响应式，数据变化驱动网页发生变化

指令: v-xxx
v-bind:attr=""
v-if
v-on

v-model
getter | setter: oninput
双向数据绑定：mvvm (model -> view, view -> model)
-->
<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ],
      todoText: "",
      msg: "hello vue!",
      seen: true,
      text: "hello input"
    },
    methods: {
      addTodo() {
        this.todos.push({
          text: this.todoText
        })
        this.todoText = ""
      },
      reverseMsg() {
        this.msg = this.msg.split("").reverse().join('')
      },
      handleChange(event) {
        // console.log(event.target.value)
        this.text = event.target.value
      }
    }
  })
</script>
</body>
</html>
